嗨,各位鐵人夥伴! 👋
這是一篇專為新手設計的文章。如果你是經驗豐富的老手,可以跳過這篇,或者把它分享給你沒時間親自指導的新人,解放你的寶貴時間! 😉
本文會用最淺顯易懂的方式,簡單快速的說明 前端的與後端概要,讓完全沒有基礎的讀者也能輕鬆理解,但同時我也深入多解釋一些,不是只會單純跟你說前端是畫面後端是邏輯。
「前端」、「後端」、「前端工程師」、「後端工程師」... 這些詞彙你可能常常聽到,但總覺得似懂非懂?別擔心,今天就讓我用最白話的方式,一次為你解釋清楚!
在深入之前,有個小提醒:我翻閱了許多資料,發現要給前端和後端一個「精準無爭議」的定義其實很難。但業界有一個廣泛的共識,主要圍繞著程式碼在哪裡運行:
💻 前端 (Frontend):關乎使用者介面 (UI) 和使用者體驗 (UX) 的一切。程式碼主要在 使用者設備 (Client-Side) 上運行(例如你的電腦瀏覽器、手機 App),負責呈現畫面、處理互動,並確保應用程式在各種裝置上都能順暢美觀。
⚙️ 後端 (Backend):關乎伺服器、資料和商業邏輯的一切。程式碼在 遠端主機 (Server-Side) 上運行,負責處理核心業務邏輯、與資料庫溝通、驗證使用者身份、確保系統安全,並提供前端所需的資料。
這是一個常見的誤解! 前端也包含複雜的邏輯。一個典型的例子是「即時搜尋與篩選」功能。當你在網頁上輸入文字時,前端程式碼會直接在你的瀏覽器中處理資料的過濾和排序,提供流暢無延遲的體驗。這就是跑在 Client-Side 的邏輯。
所以,區分前後端的關鍵,不在於「有沒有邏輯」,而在於「邏輯在哪裡執行」。
聽起來還是有點複雜?沒關係,我們先從了解各自的技術開始吧!
前端技術博大精深,這裡我們只做最概要的簡介,讓你快速建立基本概念。
我們以最常見的 Web 應用程式(也就是你用瀏覽器開的網頁或系統)為例。在這種情境下,前端的核心技術離不開三劍客:HTML, CSS, 和 JavaScript。
HTML 負責定義網頁的 結構 與 內容。它會告訴瀏覽器:「嘿,這裡有一個標題、一個段落和一個按鈕。」
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端互動範例</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>前端互動範例</h1>
<p id="demoText">點擊下方按鈕,我會變!</p>
<button id="myButton">點我!</button>
<script src="script.js"></script>
</body>
</html>
CSS 負責網頁的 外觀 與 樣式。它決定了元素的長相,例如按鈕的顏色、文字的大小、區塊的間距等,讓頁面看起來更美觀。
/* style.css */
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#demoText {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
#myButton {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#myButton:hover {
background-color: #0056b3;
}
JavaScript 負責處理 互動行為 與 前端邏輯。它讓頁面「動起來」。例如,它定義了當按鈕被點擊時,要執行什麼操作。
// script.js
// 1. 找到 HTML 中的按鈕
const button = document.getElementById('myButton');
// 2. 找到 HTML 中的文字段落
const text = document.getElementById('demoText');
// 3. 設定按鈕的「事件監聽器」
// 意思是:當這個按鈕被「點擊 (click)」時,就執行後面的函數
button.addEventListener('click', function () {
// 4. 按下按鈕後,會執行的邏輯:
// 將文字的內容改為「你點擊了我!」
text.textContent = '你點擊了我!';
});
從上面的例子可以看出,嚴格來說,HTML 和 CSS 算是「標記語言」,而 JavaScript 則是不折不扣的「程式語言」,能夠處理非常複雜的邏輯。
你可能聽過前端三大主流技術:React, Vue, Angular。這些工具(無論是框架或函式庫)都是基於 JavaScript 發展而來,它們的出現是為了解決日益複雜的前端需求,提升開發效率與維護品質。
你可以把它們想像成 開發懶人包:裡面預先寫好了許多常用功能和架構,讓工程師不必從零開始「造輪子」,可以更快地開發出穩定、高效的應用程式。
補充:無論使用哪種框架,經過 打包(Bundle)和編譯(Compile) 後,最終產生的仍然是瀏覽器唯一看得懂的 HTML, CSS, 和 JavaScript。
後端技術同樣博大精深。簡單來說,後端主要處理 業務邏輯 (Business Logic)。
「業務邏輯」泛指系統運作的核心規則,例如:
這些都屬於後端的範疇。
你可能會問:「既然前端的 JavaScript 也能處理邏輯,為什麼不直接讓前端把資料存進資料庫就好了?」
答案很簡單,但至關重要:安全性。
前端的程式碼跑在用戶的設備上,這意味著它 可以被輕易地檢視和竄改。如果把重要的驗證邏輯(如檢查帳戶餘額)放在前端,駭客就能繞過檢查,為所欲為。
而後端程式碼跑在 受保護的伺服器 上,使用者無法直接接觸。因此,所有與 資料存取、權限驗證、交易處理 相關的核心邏輯,都必須放在後端,才能確保系統的穩定與安全。
後端還有一個重點在於,要去思考資料庫的資料怎麼存,怎麼操作,怎麼處理,也就是怎麼跟 DB 溝通?
你會覺得這簡單? 不? 資料的關聯可學識博大精深,甚至可以說很多後端工程師或架構師在討論需求的時候,腦袋裡都在想這資料怎麼存放
這需要提到資料正規劃(請看後續章節 Day 18: 🗺️ 設計的藍圖:ER Model, 主外鍵與索引 (Index))
後端的選擇非常多樣,在台灣的大型甲方企業級 Web 應用中,常見的後端語言有:
[!NOTE] > 聲明:不負責任且沒有要戰的淺淺討論
以下是針對「台灣大型甲方公司」的 Web Application 後端生態的個人觀察:
- Java 與 C# (ASP.NET Core):在企業級應用中佔有相當大的比重。這背後有許多歷史、生態系、找人難易度等因素,此處不深入避免引戰。
- Python, Go:近年來在新專案中的採用率有明顯提升的趨勢,在國外尤其如此。
- Javascript(Node.js):對你沒看錯,Javascript可以跑在Server,也可以拿寫後端,得益於Node.js(JavaScript runtime environment)。
- Python:除了 Web 開發,Python 在資料科學、數據工程、AI 領域幾乎處於主導地位,這也是它近年來如此熱門的原因。
- PHP:雖然在大型甲方公司的新案中較少見(可能與一些歷史資安印象有關),但其全球市佔率依然非常高,尤其在中小型網站、電商和內容管理系統(如 WordPress)領域,實力強勁。Respect!
- COBOL:在許多金融業的核心系統(特別是大型主機)中,依然扮演著關鍵角色。
- 其他語言:未被列出的語言不代表不重要,可能只是在上述特定場景較少見,或是我個人遺漏了。
小提醒:選擇哪種語言通常取決於公司策略、團隊技能、專案需求、生態系成熟度等多重因素。每種語言都有其優勢和適合的場景,沒有絕對的好壞之分。
最常見的方式是透過 API (Application Programming Interface)。
API 是一種介面,它定義了前後端之間資料交換的規則與格式,讓不同系統能夠相互溝通。當前端需要資料或執行特定功能時,它會向後端發出 API 請求。後端處理完畢後,會將結果透過 API 回傳給前端。
關於 API 的詳細介紹,我們會在後續的文章 (Day 7: 🗣️ 溝通的語言:API, JSON, XML 與 RESTful) 中深入探討。
一個稍有規模的軟體專案,通常像一個團隊合作的電影劇組,各司其職。以下是一些常見的角色: